<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
  <button>发送请求1</button>
  <button>发送请求2</button>
  <button>取消发送请求</button>
</body>
<script>
  const btn = document.querySelectorAll('button');
  const controller = new AbortController();
  let cancel // 用于保存取消请求的函数
 btn[0].onclick=function getProducts1() {
  axios({
    url: 'http://localhost:3000/posts/1',
    cancelToken: new axios.CancelToken(function executor(c){ // c是用于取消当前请求的函数
      // 保存取消函数，用于之后可能需要取消当前请求
      cancel = c;
    })
  }).then(
    response => {
      cancel = null
      console.log('请求1成功了', response.data)
    },
    error => {
      cancel = null
      console.log('请求1失败了', error.message, error) // 请求1失败了 强制取消请求 Cancel {message: "强制取消请求"}
    }
  )

}

btn[1].onclick=function getProducts2() {
  axios({
      url: 'http://localhost:3000/posts/2',
      signal: controller.signal
  }).then(
    response => {
      cancel = null
      console.log('请求2成功了', response.data)
    },error=>{
      cancel = null
      console.log('请求2失败了',error.message,error);
    }
  )
}

btn[2].onclick=function cancelReq() {
  // alert('取消请求')
  // 执行取消请求的函数
  if (typeof cancel === 'function'){
    cancel('强制取消请求')
    controller.abort('请求2被强制取消'); 
  } else {
    console.log('没有可取消的请求')
  }
  
}
</script>
</html>
